<template>
    <div>
        <el-dialog v-model="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false"
            :show-close="false" title="编辑植物" style="text-align: center;" width="40%">
            <div style="display: flex; justify-content:center;">
                <el-form style="width: 80%;" label-position="left" :model="form">
                    <el-form-item label="名称">
                        <el-input v-model="form.name" autocomplete="off" placeholder="名称" />
                    </el-form-item>
                    <el-form-item label="阳光">
                        <el-input v-model="form.suns" autocomplete="off" placeholder="阳光" />
                    </el-form-item>
                    <el-form-item label="cd">
                        <el-input v-model="form.cd" autocomplete="off" placeholder="cd" />
                    </el-form-item>
                    <el-form-item label="攻击">
                        <el-input v-model="form.atk" autocomplete="off" placeholder="攻击" />
                    </el-form-item>
                    <el-form-item label="生命">
                        <el-input v-model="form.hp" autocomplete="off" placeholder="生命" />
                    </el-form-item>
                    <el-form-item label="植物性质">
                        <el-select v-model="form.status">
                            <el-option label="一次性植物" value="0" />
                            <el-option label="非一次性植物" value="1" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="植物环境">
                        <el-select v-model="form.env">
                            <el-option label="白天" value="day" />
                            <el-option label="夜晚" value="night" />
                            <el-option label="迷雾" value="fog" />
                            <el-option label="泳池" value="pool" />
                            <el-option label="屋顶" value="roof" />
                            <el-option label="商店" value="shop" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="植物图片">
                        <x-uploader :currentImg="form.img" :result="handleUpload"></x-uploader>
                    </el-form-item>
                    <el-form-item label="植物描述">
                        <el-input v-model="form.description" autosize type="textarea" autocomplete="off"
                            placeholder="植物描述" />
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handleClose('cancel')">取消</el-button>
                    <el-button type="primary" @click="handleEditOk">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import XUploader from './x-uploader.vue';

const props = defineProps({
    dialogVisible: Boolean,
    form: Object,
    handleClose: Function
})

const handleEditOk = () => {
    props.handleClose(props.form)
}

const handleUpload = (img) => {
    props.form.img = img
}

</script>

<style lang="scss" scoped>

</style>